<template>
    <div>
      <mt-swipe :auto="2000">
        <mt-swipe-item v-for="(item, index) in imageList" :key="index">
          <img :src="item.img" alt="">
        </mt-swipe-item>
            
      </mt-swipe>

      <!-- 六宫格导航模块 -->
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <router-link to="/home/newslist">
                <img src="../../assets/images/menu1.png" alt="">
                <div class="mui-media-body">新闻资讯</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <img src="../../assets/images/menu2.png" alt="">
                <div class="mui-media-body">图片分享</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <img src="../../assets/images/menu3.png" alt="">
                <div class="mui-media-body">商品购买</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <img src="../../assets/images/menu4.png" alt="">
                <div class="mui-media-body">留言反馈</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <img src="../../assets/images/menu5.png" alt="">
                <div class="mui-media-body">视频专区</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <img src="../../assets/images/menu6.png" alt="">
                <div class="mui-media-body">联系我们</div></a></li>
      </ul> 
    </div>
</template>
           
<script>
export default{
   data() {
     return {
       imageList: []
     }
   },
   created() {
     this.getSwipe();
   },
   methods: {
     getSwipe() {
       this.$http.get('api/getlunbo').then(result => {
         if(result.body.status === 0) {
           this.imageList = result.body.message
         } else {
           Toast('图片数据失败');
         }
       })
     }
   }          
}
</script>
<style scoped lang="scss">
     .mint-swipe {
       height: 200px;
     }
    //  .mint-swipe-item:nth-child(1) {
    //    background-color: orange;
    //  } 
    //  .mint-swipe-item:nth-child(2) {
    //    background-color: cyan;
    //  } 
     .mint-swipe-item {
       img {
         width: 100%;
         height: 100%;
       }
     }
     .mui-grid-view.mui-grid-9{
        background-color: #fff;  
        border: none;
      }
      .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        background-color: #fff;
        border: none;
          img{
            width: 60px;
          }
          .mui-media-body {
            font-size: 16px;
          }
      }    
</style>